<template>
  <div id="Choiceness">
    <h2>最新菜谱</h2>
    <ul id="choicnessVessels">
      <li v-for="(item,index) in contents" :key="item.menuId" :class="[(index+1)%3==0?'delLi':'']">
        <router-link :to="{
          name: 'DishDetails',
            params: {
              id: item.menuId
            }
        }">
<!--          <img class="coverImg" :src="item.menuSrc" alt="">-->
          <el-avatar class="coverImg" :src="item.menuSrc" @error="errorHandler">
            <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
          </el-avatar>
          <p>{{item.menuName}}</p>
          <div>
            <img class="headerImg" :src="item.headImg" alt="">
            {{item.nickname}}
          </div>
          <div class="heat">
            <span class="view">
              {{Nums(item.doh)}}
            </span>
            <span class="collect">{{Nums(item.collection)}}</span>
          </div>
        </router-link>
      </li>
    </ul>
    <div class="page">
      <el-pagination
        class="pages"
        background
        layout="prev, pager, next"
        :total="pages.total"
        :hide-on-single-page=true
        :current-page="pages.current"
        :pager-count=5
        :page-size=12
        @current-change="handleCurrentChange">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import cookie from '../../cookien'
export default {
  name: 'Newest',
  data () {
    return {
      // 每页的精选菜谱数据
      contents: [],
      // 分页
      pages: {
        // 每页十条，共几条
        total: 0,
        // 当前页数
        vals: 1,
        // 自定义第几页
        current: 1
      }
    }
  },
  computed: {
    Nums (value) {
      return (value) => {
        if (value >= 100000000) {
          value = Math.round(value / 10000000) / 10 + '亿'
        } else if (value >= 10000000) {
          value = Math.round(value / 1000000) / 10 + 'kw'
        } else if (value >= 10000) {
          value = Math.round(value / 1000) / 10 + 'w'
        } else if (value >= 1000) {
          value = Math.round(value / 100) / 10 + 'k'
        }
        return value
      }
    }
  },
  methods: {
    errorHandler () {
      return true
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    handleCurrentChange (val) {
      // 当前页数
      this.pages.vals = val
      this.$axios({
        url: '/Menu/Visitor/findAllNearTimeMenu',
        headers: {
          token: cookie.getToken()
        },
        params: {
          pageNow: this.pages.vals,
          pageSize: 12
        }
      }).then(data => {
        console.log(data)
        if (data.data.code === 200) {
          this.pages.total = data.data.object.total
          this.contents = data.data.object.list
        }
      }).catch(err => {
        console.log(err)
      })
    }
  },
  mounted () {
    this.$axios({
      url: '/Menu/Visitor/findAllNearTimeMenu',
      headers: {
        token: cookie.getToken()
      },
      params: {
        pageNow: 1,
        pageSize: 12
      }
    }).then(data => {
      console.log(data)
      if (data.data.code === 200) {
        this.pages.total = data.data.object.total
        this.contents = data.data.object.list
      }
    }).catch(err => {
      console.log(err)
    })
  }
}
</script>

<style lang="less" scoped>
#Choiceness{
  width: 100%;
  h2{
    font-size: 20px;
    color: #333;
    line-height: 20px;
    font-weight: bold;
    margin-bottom: 25px;
  }
  #choicnessVessels{
    overflow: auto;
    list-style: none;
    .delLi{
      margin-right: 0px;
    }
    li{
      float: left;
      position: relative;
      width: 300px;
      height: 255px;
      overflow: hidden;
      margin: 0 40px 40px 0;
      a{
        color: black;
        display: block;
        width: 100%;
        height: 100%;
        text-decoration: none;
        .coverImg{
          width: 300px;
          height: 200px;
          background-size: cover;
          background-position: center;
          vertical-align: bottom;
          border-radius: 8px;
        }
        p{
          font-size: 15px;
          color: #333;
          line-height: 15px;
          padding: 10px 0;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
        div{
          max-width: 170px;
          vertical-align: middle;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          font-size: 12px;
          .headerImg{
            width: 20px;
            height: 20px;
            border-radius: 50%;
            vertical-align: bottom;
          }
        }
        .heat{
          position: absolute;
          bottom: 0;
          right: 0;
          .view{
            margin-right: 10px;
            &:before{
              content:'';
              display: inline-block;
              width: 17px;
              height: 12px;
              background: url("../../assets/view2.png");
              vertical-align: middle;
              margin-right: 2px;
              position: relative;
              top: -1px;
            }
          }
          .collect{
            &:before{
              content:'';
              display: inline-block;
              width: 14px;
              height: 13px;
              background: url("../../assets/collect2.png");
              vertical-align: middle;
              margin-right: 2px;
              position: relative;
              top: -1px;
            }
          }
        }
      }
    }
  }
  .pages{
    display: flex;
    justify-content:center;
    flex-wrap:wrap;
  }
}
</style>
